<template>
    <el-col :span="Number(colspan)">
        <el-form-item
                :prop="name"
                :label-width="labelWidth + 'px'"
                :label="label"
                :title="label"
                v-show="property.p.indexOf('H') === -1">
            <el-input :disabled="property.p.indexOf('D') >= 0" :name="name" v-model="property.value"
                      :type="type"
                      :placeholder="placeholder"
                      :maxlength="maxlength"
                      :id="'input' + name"
                      @change="onChange" @blur="onBlur" @focus="onFocus" :data-value="property.value"
                      :data-p="property.p" :value="property.value">
                <i class="el-icon-search el-input__icon"
                   slot="suffix"
                   v-show="property.p.indexOf('D') === -1 && isClick"
                   @click="onClick">
                </i>
            </el-input>
        </el-form-item>
    </el-col>
</template>

<script type="es6">
    export default {
        props: {
            colspan: {
                type: String,
                default: '24'
            },
            labelWidth: {
                type: String,
                default: '140'
            },
            label: {
                type: String,
                default: ''
            },
            placeholder: {
                type: String,
                default: ''
            },
            p: {
                type: String,
                default: ''
            },
            type: String,
            maxlength: Number,
            property: {
                type: Object,
                default: function () {
                    return {
                        value: '',
                        p: ''
                    }
                }
            },
            name: {
                type: String,
                default: ''
            },
            datas: {
                type: Object,
                default: null
            },
            isChange: {
                type: Boolean,
                default: false
            },
            isClick: {
                type: Boolean,
                default: false
            },
            isBlur: {
                type: Boolean,
                default: false
            },
            isFocus: {
                type: Boolean,
                default: false
            },
            isRed: {
                type: Boolean,
                default: false
            },
            isCodeType: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            codeTypes() {
                return this.$store.getters.codeTypes;
            }
        },
        mounted() {
            document.getElementById('input' + this.name).style.color = this.isRed ? 'red' : '';
        },
        methods: {
            /**
             * 点击事件
             */
            onClick() {
                if (!this.isClick) return;
                this.$emit("isClick", true);
                let obj = {
                    path: this.$route.path + '/doQuery/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 选择事件
             */
            onChange() {
                if (!this.isChange) return;
                let obj = {
                    path: this.$route.path + '/doCheck/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                if(this.isCodeType){
                    obj.params.codeTypes = this.codeTypes;
                }
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 失去焦点
             */
            onBlur() {
                if (!this.isBlur) return;
                let obj = {
                    path: this.$route.path + '/blur/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            },
            /**
             * 获取焦点
             */
            onFocus() {
                if (!this.isFocus) return;
                let obj = {
                    path: this.$route.path + '/focus/' + this.name,
                    params: {
                        path: this.$route.path,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-icon-search {
        color: #000;
        cursor: pointer;
    }
</style>
